<template>
  <BasicDrawer v-bind="$attrs" @register="register" title="油站详情" width="50%">
    <template #default>
      <div class="p-4">
        <BasicTable @register="tableRegister">
          <template #toolbar>
            <a-button type="primary" @click="expandAll">展开全部</a-button>
            <a-button type="primary" @click="collapseAll">折叠全部</a-button>
          </template>
        </BasicTable>
      </div>
    </template>
  </BasicDrawer>
</template>

<script lang="ts">
  import { defineComponent, ref, onMounted } from 'vue';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  import { BasicTable, BasicColumn, useTable } from '/@/components/Table';
  import { getDevices } from '/@/api/sys/user';

  export default defineComponent({
    components: { BasicDrawer, BasicTable },
    setup() {
      interface DataItem {
        key: string;
        address: string;
        code: string;
        name: string;
        createBy: string;
        createTime: string;
      }

      const data = ref<DataItem[]>([]);
      const receivedData = ref<DataItem | null>(null);

      const columns: BasicColumn[] = [
        {
          title: '油站名称',
          dataIndex: 'company',
          // fixed: 'left', // 如果需要固定列，可以取消注释
          width: 200,
        },
        {
          title: '编号/铅封',
          dataIndex: 'code',
          width: 150,
        },
        {
          title: '设备',
          dataIndex: 'name',
          width: 150,
        },
        {
          title: '状态',
          dataIndex: 'claimStatus',
          width: 150,
        },
        {
          title: '创建人',
          dataIndex: 'updateBy',
          width: 150,
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          width: 150,
        },
      ];

      const fetchData = async (params: { company: string; regionCode: string }) => {
        try {
          const response = await getDevices(params); // 假设 getDevices 接受 params 参数
          const newData = response; // 假设响应数据在 response.data 中
          console.log('API Response:', response);
          newData.forEach((item, index) => {
            item.key = `parent-${index}-${item.id}`; // 使用 item.id 生成唯一 key
            item.children?.forEach((child, childIndex) => {
              child.company = child.inspectionUnit;
              child.code = child.id;
              child.claimStatus =
                child.claimStatus == 1
                  ? '待领取'
                  : child.claimStatus == 2
                    ? '已领取'
                    : child.claimStatus == 3
                      ? '已施封'
                      : child.claimStatus == 4
                        ? '已报废'
                        : '';
              child.name = child.position == 1 ? '编码器' : child.position == 2 ? '流量计' : child.position == 3 ? '主板' : '';
              child.key = `child-${index}-${childIndex}-${child.id}`; // 使用 child.id 生成唯一 key
            });
          });

          data.value = newData; // 更新数据
        } catch (error) {
          console.error('Failed to fetch data:', error);
        }
      };

      const [register] = useDrawerInner((data) => {
        // 在抽屉打开时接收数据
        receivedData.value = data; // 存储数据
        console.log('Received data in drawer:', receivedData.value);
        fetchData({
          company: receivedData.value.company,
          regionCode: receivedData.value.regionCode,
        });
      });

      const [tableRegister, { expandAll, collapseAll }] = useTable({
        isTreeTable: true,

        columns: columns,
        dataSource: data,
        rowKey: 'key',
      });

      return { register, tableRegister, expandAll, collapseAll };
    },
  });
</script>

<style scoped>
  .p-4 {
    padding: 16px;
  }
</style>
